<template>
  <a-table :columns="columns" :data-source="data" :scroll="{ x: 500}">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'a26'">
        <p :style="{ margin: '0', padding: '0' }">
          合同卸载量
        </p>
        <span>(MMbtu)</span>
      </template>
      <template v-if="column.key === 'a27'">
        <p :style="{ margin: '0', padding: '0' }">
          实际卸载量
        </p>
        <span>(MMbtu)</span>
      </template>
    </template>
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'tags'">
        <div class="table-btn-box">
          <span class="table-btn">查看</span>
          <span class="table-btn">下发</span>
          <span class="table-btn">终止</span>
        </div>
      </template>
    </template>
  </a-table>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from "vue-router";
const columns = ref([{
  title: '序号',
  dataIndex: 'a1',
  key: 'a1',
  width: '80px',
  fixed: 'left',
  align: 'center'
}, {
  title: '航次号',
  dataIndex: 'a2',
  key: 'a2',
  width: '150px',
  fixed: 'left',
  align: 'center'
}, {
  title: '货号',
  dataIndex: 'a3',
  key: 'a3',
  ellipsis: true,
  width: '150px',
  fixed: 'left',
  align: 'center'
}, {
  title: '资源方',
  dataIndex: 'a4',
  key: 'a4',
  ellipsis: true,
  align: 'center',
  width: '150px'
}, {
  title: '贸易类型',
  dataIndex: 'a5',
  key: 'a5',
  ellipsis: true,
  align: 'center',
  width: '150px',
}, {
  title: '贸易主体',
  dataIndex: 'a6',
  key: 'a6',
  ellipsis: true,
  align: 'center',
  width: '150px'
},
  {
    title: '预计装载时间',
    dataIndex: 'a7',
    key: 'a7',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '预计装载完成时间',
    dataIndex: 'a8',
    key: 'a8',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '实际装载时间',
    dataIndex: 'a9',
    key: 'a9',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '装载港',
    dataIndex: 'a10',
    key: 'a10',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '船舶名称',
    dataIndex: 'a11',
    key: 'a11',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: 'IMO',
    dataIndex: 'a12',
    key: 'a12',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '巴拿马运河提前预定时间',
    dataIndex: 'a13',
    key: 'a13',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '换港时间1',
    dataIndex: 'a14',
    key: 'a14',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '换港时间1',
    dataIndex: 'a15',
    key: 'a15',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '换港时间2',
    dataIndex: 'a16',
    key: 'a16',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '换港时间2',
    dataIndex: 'a17',
    key: 'a17',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '合同装载量',
    dataIndex: 'a18',
    key: 'a18',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '实际装载量',
    dataIndex: 'a19',
    key: 'a19',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '预计卸载港',
    dataIndex: 'a20',
    key: 'a20',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '预计满载航程天数',
    dataIndex: 'a21',
    key: 'a21',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '预计卸载窗口',
    dataIndex: 'a22',
    key: 'a22',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '预计空载航程天数',
    dataIndex: 'a23',
    key: 'a23',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '预计空载返程时间',
    dataIndex: 'a24',
    key: 'a24',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '实际卸载日期',
    dataIndex: 'a25',
    key: 'a25',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '合同卸载量',
    dataIndex: 'a26',
    key: 'a26',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '实际卸载量',
    dataIndex: 'a27',
    key: 'a27',
    ellipsis: true,
    align: 'center',
    width: '150px'
  },
  {
    title: '状态',
    dataIndex: 'a28',
    key: 'a28',
    ellipsis: true,
    width: '150px',
    align: 'center',
    fixed: 'right',
  },
  {
    title: '备注',
    dataIndex: 'a29',
    key: 'a29',
    ellipsis: true,
    fixed: 'right',
    align: 'center',
    width: '150px'
  },
  {
    title: '操作',
    key: 'tags',
    fixed: 'right',
    align: 'center',
    width: '170px'
  }
])
const data = ref([{
  a1: '1',
  a2: 'CNOOC-ZG-2023-03',
  a3: 'BP-FOB-2',
  a4: 'BP',
  a5: '长协',
  a6: '国贸',
  a7: '2023/03/13',
  a8: '2023/03/15',
  a9: '2023/03/15',
  a10: 'Point Fortin, Trinidad',
  a11: 'Kool Frost',
  a12: '9655142',
  a13: '2022/12/29',
  a14: '2022/12/12/28',
  a15: '2023/01/27',
  a16: '2023/02/16',
  a17: '3530000',
  a18: '3530000',
  a19: '欧洲',
  a20: '18',
  a21: '2023/04/02',
  a22: '2023/04/04',
  a23: '18',
  a24: '2023/04/22',
  a25: '2023/04/20',
  a26: '',
  a27: '',
  a28: '未执行',
  a29: '船名Golar Frost（IMO）',

},
  {
    a1: '2',
    a2: 'CNOOC-ZG-2023-03',
    a3: 'BP-FOB-2',
    a4: 'BP',
    a5: '长协',
    a6: '国贸',
    a7: '2023/03/13',
    a8: '2023/03/15',
    a9: '2023/03/15',
    a10: 'Point Fortin, Trinidad',
    a11: 'Kool Frost',
    a12: '9655142',
    a13: '2022/12/29',
    a14: '2022/12/12/28',
    a15: '2023/01/27',
    a16: '2023/02/16',
    a17: '3530000',
    a18: '3530000',
    a19: '欧洲',
    a20: '18',
    a21: '2023/04/02',
    a22: '2023/04/04',
    a23: '18',
    a24: '2023/04/22',
    a25: '2023/04/20',
    a26: '',
    a27: '',
    a28: '未执行',
    a29: '船名Golar Frost（IMO）',

  }
])

const router = useRouter()
const goInfo = ()=> {
  router.push({
    path: '/'
  })
}
</script>

<style lang="scss" scoped>
.table-btn-box {
  display: flex;
}
</style>
